<template>
  <div class="box" ref="box" v-resize="resize">
    <div class="left" ref="left">
      <slot name="left" >
      </slot>
    </div>
    <div class="resize" ref="resize" title="水平缩放">
    </div>
    <div class="right" ref="right">
      <slot name="right">
      </slot>
    </div> 
  </div>
</template>
<script>
export default {
  name: 'HorizontalDrag',
  props: {
    rightWidth: {
      type: [String, Number],
      default: 0
    },
    minWidth: {
      type: [String, Number],
      default: 30
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    this.resize(true)
  },
  methods: {
    dragControllerDiv(isInit = false) {
      let box = this.$refs.box
      let resize = this.$refs.resize;
      let left = this.$refs.left;
      let right = this.$refs.right;
    
      if (this.rightWidth != 0 && box.offsetWidth > this.rightWidth && isInit) {
        left.style.width = box.offsetWidth - this.rightWidth - 5 + 'px'
        right.style.width = this.rightWidth + 'px'
      } else {
        let rawWidth = left.offsetWidth + right.offsetWidth + resize.offsetWidth
        let lw = left.offsetWidth
        let leftNW = lw / rawWidth * box.offsetWidth
        left.style.width = leftNW + 'px'
        right.style.width = box.offsetWidth - leftNW - 5 + 'px'
      }
      // 鼠标按下事件
      resize.onmousedown = (e) => {
          //颜色改变提醒
          resize.style.background = '#818181';
          let startX = e.clientX;
          let leftWidth = left?.clientWidth
          let rightWidth = right?.clientWidth
          // 鼠标拖动事件
          document.onmousemove = (e) => {
            let endX = e.clientX;
            let moveLen = endX - startX; // （endx-startx）=移动的距离 
            if (leftWidth + moveLen < this.minWidth) {
              moveLen = left?.clientWidth - leftWidth
            } else if (rightWidth - moveLen < this.minWidth) {
              moveLen = rightWidth - right?.clientWidth
            }
            left.style.width = leftWidth + moveLen + 'px';
            right.style.width = rightWidth - moveLen + 'px';
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
              //颜色恢复
              resize.style.background = '#d6d6d6';
              document.onmousemove = null;
              document.onmouseup = null;
              resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
      };
      
    },
    resize(isInit = false) {
      this.$nextTick(() => {
        this.dragControllerDiv(isInit)
      })
    }
  }
}
</script>
<style scoped>
/* 拖拽相关样式 */
/*包围div样式*/
.box {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
    background-color: #F1F5F7;
    /* position: relative; */
    display: flex;
}
/*左侧div样式*/
.left {
    width: 75%;
    height: 100%;
}
/*拖拽区div样式*/
.resize {
    cursor: col-resize;
    background-color: #d6d6d6;
    border-radius: 5px;
    width: 5px;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
    color: #444444;
}
/*右侧div'样式*/
.right {
  width: calc(25% - 5px);   /*右侧初始化宽度*/
  height: 100%;
}
</style>